<template>
    <div>
        <Banner/>
        <Recommend/>
     <div class="windiv" v-if="seenright" >
      <ul id="win">
      <li v-for="(item,index) in windiv" @click="windi(index)" >{{item.title}}</li>
      <li><span><i class="fa fa-headphones"></i></span></li>
      <li id="top"><span><i class="fa fa-cart-arrow-down"></i></span></li>
      <li @click="top()">
        <div>顶部</div>
        <div><i class="fa fa-chevron-up"></i></div>
      </li>
      </ul>
    </div>
        <Mains :list="fish"/>
        <Mains :list="shrimp"/>
        <Mains :list="crab"/>
        <Mains :list=" shellfish"/>
        <Mains :list="meat"/>
    </div>
</template>
<script>
import Banner from "@/components/HomePage/Banner";
import Mains from "@/components/HomePage/Mains";
import Recommend from "@/components/HomePage/Recommend";
export default {
  name: "Hbody",
  data() {
    return {
      seenright: false,
      windowsrcoll: "",
      index: "",
      windiv: [
        {
          title: "鱼类"
        },
        {
          title: "虾类"
        },
        {
          title: "蟹类"
        },
        {
          title: "贝类"
        },
        {
          title: "肉类"
        }
      ],
      fish: {
        title: "鱼类",
        text: "新鲜海货,即时享受",
        text1: "刺身",
        text2: "虾类",
        text3: "小龙虾",
        text4: "活鲜",
        text5: "海参",
        text6: "扇贝",
        text7: "更多海鲜",
        datas: [
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5887/131/2327523651/202295/9ebd5609/592fbc0aNa95bd81c.jpg!q80.webp",
            title: "大洋世家 阿根廷红虾L1 2kg盒 30-40只 原装进口 海鲜大虾",
            price: "¥129.90"
          },
          {
            pic:
              "https://img11.360buyimg.com/babel/s150x150_jfs/t22549/78/556713648/98195/1e1443b9/5b35d036Nf3d3104a.jpg!q80.webp",
            title:
              "【现货】今锦上 阳澄湖六月黄大闸蟹现货实物生鲜礼盒 2.0-2.1两6只装螃蟹 海鲜水产",
            price: "¥129.90"
          },
          {
            pic:
              "https://img12.360buyimg.com/babel/s150x150_jfs/t16687/39/2664016549/215913/6935661a/5b03ce20N344524f1.jpg!q80.webp",
            title: "红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只 海鲜水产",
            price: "¥129.90"
          },
          {
            pic:
              "https://img13.360buyimg.com/babel/s150x150_jfs/t3493/253/425253315/176995/19f2a2b2/5808619cN27390691.jpg!q80.webp",
            title: "美威 智利原味三文鱼排（大西洋鲑）  240g/袋 4片装",
            price: "¥129.90"
          },
          {
            pic:
              "https://img14.360buyimg.com/babel/s150x150_jfs/t4285/318/443221820/183144/38b9a2d4/58b514f9N3f8d45c4.jpg!q80.webp",
            title: "晓芹 大连冷冻即食海参 1000g 20只 袋装 海鲜水产",
            price: "¥129.90"
          },
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t16684/197/1453627310/441848/1b7b7fe7/5acc5be9N7ef19b9f.jpg!q80.webp",
            title:
              "【第2份1元！买3份均价60】红功夫小龙虾 爆款35-50只麻辣4-6钱1.8kg",
            price: "¥129.90"
          }
        ],
        icon: [
          require("../../assets/image/ic1.jpg"),
          require("../../assets/image/ic2.jpg"),
          require("../../assets/image/ic3.jpg"),
          require("../../assets/image/ic4.jpg"),
          require("../../assets/image/ic5.jpg"),
          require("../../assets/image/ic6.jpg"),
          require("../../assets/image/ic7.jpg"),
          require("../../assets/image/ic8.jpg"),
          require("../../assets/image/ic9.jpg"),
          require("../../assets/image/ic10.jpg")
        ],
        img1: require("../../assets/image/59886313N1622b0f9.png"),
        img2: require("../../assets/image/xia.jpg"),
        img3:
          "https://img10.360buyimg.com/babel/jfs/t24454/339/1112869970/140632/dcc66711/5b514b9fN8358e098.png!q80.webp"
      },
      shrimp: {
        title: "虾类",
        text: "活蓝龙虾",
        text1: "墨西哥红龙",
        text2: "南澳龙",
        text3: "青龙",
        text4: "西澳龙",
        text5: "新西兰岩龙虾",
        text6: "新西兰岩龙虾",
        text7: "更多龙虾",
        datas: [
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5740/88/9794752166/382277/ecc806d2/5989643aN51b5a71f.jpg!q80.webp",
            title: "草原宏宝 羔羊肉串 500g/袋（约20串）鲜冻羊肉串 BBQ烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img11.360buyimg.com/babel/s150x150_jfs/t3058/158/2712386758/115675/823d0378/57e50d12Nb9f159f6.jpg!q80.webp",
            title: "恒都 羔羊后腿 2kg/袋 烧烤食材 火锅食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img12.360buyimg.com/babel/s150x150_jfs/t8989/68/472741290/617241/743a3f89/59a8af05Ned86eb1b.jpg!q80.webp",
            title: "民维大牧汗 180羔羊肉片 540g/袋 火锅食材羊肉卷 草饲散养",
            price: "¥129.90"
          },
          {
            pic:
              "https://img13.360buyimg.com/babel/s150x150_jfs/t2299/57/2562778403/355675/41575cd1/570e2387N1ae55691.jpg!q80.webp",
            title: "东来顺 孜然羊肉串 400g/袋（约20串）调理肉串 烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img14.360buyimg.com/babel/s150x150_jfs/t17254/119/1905236039/49073/b8a0fd12/5add26faN698a913d.jpg!q80.webp",
            title: "荷美尔 经典香煎培根 冷冻熟食 120g/袋*5 烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5644/353/3534332129/134060/3210c288/593defb6N9dc7c9c3.jpg!q80.webp",
            title: "草原宏宝 羔羊单骨法式羊排 500g/袋 无公害谷饲羊肉 烧烤食材",
            price: "¥129.90"
          }
        ],
        icon: [
          require("../../assets/image/ic1.jpg"),
          require("../../assets/image/ic2.jpg"),
          require("../../assets/image/ic3.jpg"),
          require("../../assets/image/ic4.jpg"),
          require("../../assets/image/ic5.jpg"),
          require("../../assets/image/ic6.jpg"),
          require("../../assets/image/ic7.jpg"),
          require("../../assets/image/ic8.jpg"),
          require("../../assets/image/ic9.jpg"),
          require("../../assets/image/ic10.jpg")
        ],
        // img1:require("../../assets/image/rou.png"),
        img1:
          "https://img11.360buyimg.com/cms/jfs/t7180/223/664802511/8778/640240c3/5982e076N2f456b3e.png",
        img2:
          "https://img10.360buyimg.com/babel/jfs/t21274/154/2326809402/63048/1ab6b2a9/5b5057abN4321302f.jpg",
        img3:
          "https://img10.360buyimg.com/babel/jfs/t20215/79/1757898901/100803/9aba7741/5b32e2a3N639741c5.png!q80.webp"
      },
      crab: {
        title: "蟹类",
        text: "肉香四溢，大快朵颐",
        text1: "猪肉",
        text2: "鸡翅",
        text3: "熟食",
        text4: "牛排",
        text5: "羊肉",
        text6: "冷鲜肉",
        text7: "更多肉类",
        datas: [
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5740/88/9794752166/382277/ecc806d2/5989643aN51b5a71f.jpg!q80.webp",
            title: "草原宏宝 羔羊肉串 500g/袋（约20串）鲜冻羊肉串 BBQ烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img11.360buyimg.com/babel/s150x150_jfs/t3058/158/2712386758/115675/823d0378/57e50d12Nb9f159f6.jpg!q80.webp",
            title: "恒都 羔羊后腿 2kg/袋 烧烤食材 火锅食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img12.360buyimg.com/babel/s150x150_jfs/t8989/68/472741290/617241/743a3f89/59a8af05Ned86eb1b.jpg!q80.webp",
            title: "民维大牧汗 180羔羊肉片 540g/袋 火锅食材羊肉卷 草饲散养",
            price: "¥129.90"
          },
          {
            pic:
              "https://img13.360buyimg.com/babel/s150x150_jfs/t2299/57/2562778403/355675/41575cd1/570e2387N1ae55691.jpg!q80.webp",
            title: "东来顺 孜然羊肉串 400g/袋（约20串）调理肉串 烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img14.360buyimg.com/babel/s150x150_jfs/t17254/119/1905236039/49073/b8a0fd12/5add26faN698a913d.jpg!q80.webp",
            title: "荷美尔 经典香煎培根 冷冻熟食 120g/袋*5 烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5644/353/3534332129/134060/3210c288/593defb6N9dc7c9c3.jpg!q80.webp",
            title: "草原宏宝 羔羊单骨法式羊排 500g/袋 无公害谷饲羊肉 烧烤食材",
            price: "¥129.90"
          }
        ],
        icon: [
          require("../../assets/image/ic1.jpg"),
          require("../../assets/image/ic2.jpg"),
          require("../../assets/image/ic3.jpg"),
          require("../../assets/image/ic4.jpg"),
          require("../../assets/image/ic5.jpg"),
          require("../../assets/image/ic6.jpg"),
          require("../../assets/image/ic7.jpg"),
          require("../../assets/image/ic8.jpg"),
          require("../../assets/image/ic9.jpg"),
          require("../../assets/image/ic10.jpg")
        ],
        img1:
          "https://img11.360buyimg.com/cms/jfs/t6043/48/7591568612/5203/8ac000f0/5982e190Ncd9d504d.png",
        img2:
          "https://img10.360buyimg.com/babel/jfs/t21274/154/2326809402/63048/1ab6b2a9/5b5057abN4321302f.jpg",
        img3:
          "https://img10.360buyimg.com/babel/jfs/t20215/79/1757898901/100803/9aba7741/5b32e2a3N639741c5.png!q80.webp"
      },
      shellfish: {
        title: "贝类",
        text: "肉香四溢，大快朵颐",
        text1: "猪肉",
        text2: "鸡翅",
        text3: "熟食",
        text4: "牛排",
        text5: "羊肉",
        text6: "冷鲜肉",
        text7: "更多肉类",
        datas: [
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5740/88/9794752166/382277/ecc806d2/5989643aN51b5a71f.jpg!q80.webp",
            title: "草原宏宝 羔羊肉串 500g/袋（约20串）鲜冻羊肉串 BBQ烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img11.360buyimg.com/babel/s150x150_jfs/t3058/158/2712386758/115675/823d0378/57e50d12Nb9f159f6.jpg!q80.webp",
            title: "恒都 羔羊后腿 2kg/袋 烧烤食材 火锅食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img12.360buyimg.com/babel/s150x150_jfs/t8989/68/472741290/617241/743a3f89/59a8af05Ned86eb1b.jpg!q80.webp",
            title: "民维大牧汗 180羔羊肉片 540g/袋 火锅食材羊肉卷 草饲散养",
            price: "¥129.90"
          },
          {
            pic:
              "https://img13.360buyimg.com/babel/s150x150_jfs/t2299/57/2562778403/355675/41575cd1/570e2387N1ae55691.jpg!q80.webp",
            title: "东来顺 孜然羊肉串 400g/袋（约20串）调理肉串 烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img14.360buyimg.com/babel/s150x150_jfs/t17254/119/1905236039/49073/b8a0fd12/5add26faN698a913d.jpg!q80.webp",
            title: "荷美尔 经典香煎培根 冷冻熟食 120g/袋*5 烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5644/353/3534332129/134060/3210c288/593defb6N9dc7c9c3.jpg!q80.webp",
            title: "草原宏宝 羔羊单骨法式羊排 500g/袋 无公害谷饲羊肉 烧烤食材",
            price: "¥129.90"
          }
        ],
        icon: [
          require("../../assets/image/ic1.jpg"),
          require("../../assets/image/ic2.jpg"),
          require("../../assets/image/ic3.jpg"),
          require("../../assets/image/ic4.jpg"),
          require("../../assets/image/ic5.jpg"),
          require("../../assets/image/ic6.jpg"),
          require("../../assets/image/ic7.jpg"),
          require("../../assets/image/ic8.jpg"),
          require("../../assets/image/ic9.jpg"),
          require("../../assets/image/ic10.jpg")
        ],
        // img1:require("../../assets/image/rou.png"),
        img1:
          "https://img11.360buyimg.com/cms/jfs/t6868/56/1584301821/12315/9fe217a6/5982d8c6N279ff1cf.png",
        img2:
          "https://img10.360buyimg.com/babel/jfs/t21274/154/2326809402/63048/1ab6b2a9/5b5057abN4321302f.jpg",
        img3:
          "https://img10.360buyimg.com/babel/jfs/t20215/79/1757898901/100803/9aba7741/5b32e2a3N639741c5.png!q80.webp"
      },
      meat: {
        title: "肉类",
        text: "肉香四溢，大快朵颐",
        text1: "猪肉",
        text2: "鸡翅",
        text3: "熟食",
        text4: "牛排",
        text5: "羊肉",
        text6: "冷鲜肉",
        text7: "更多肉类",
        datas: [
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5740/88/9794752166/382277/ecc806d2/5989643aN51b5a71f.jpg!q80.webp",
            title: "草原宏宝 羔羊肉串 500g/袋（约20串）鲜冻羊肉串 BBQ烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img11.360buyimg.com/babel/s150x150_jfs/t3058/158/2712386758/115675/823d0378/57e50d12Nb9f159f6.jpg!q80.webp",
            title: "恒都 羔羊后腿 2kg/袋 烧烤食材 火锅食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img12.360buyimg.com/babel/s150x150_jfs/t8989/68/472741290/617241/743a3f89/59a8af05Ned86eb1b.jpg!q80.webp",
            title: "民维大牧汗 180羔羊肉片 540g/袋 火锅食材羊肉卷 草饲散养",
            price: "¥129.90"
          },
          {
            pic:
              "https://img13.360buyimg.com/babel/s150x150_jfs/t2299/57/2562778403/355675/41575cd1/570e2387N1ae55691.jpg!q80.webp",
            title: "东来顺 孜然羊肉串 400g/袋（约20串）调理肉串 烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img14.360buyimg.com/babel/s150x150_jfs/t17254/119/1905236039/49073/b8a0fd12/5add26faN698a913d.jpg!q80.webp",
            title: "荷美尔 经典香煎培根 冷冻熟食 120g/袋*5 烧烤食材",
            price: "¥129.90"
          },
          {
            pic:
              "https://img10.360buyimg.com/babel/s150x150_jfs/t5644/353/3534332129/134060/3210c288/593defb6N9dc7c9c3.jpg!q80.webp",
            title: "草原宏宝 羔羊单骨法式羊排 500g/袋 无公害谷饲羊肉 烧烤食材",
            price: "¥129.90"
          }
        ],
        icon: [
          require("../../assets/image/ic1.jpg"),
          require("../../assets/image/ic2.jpg"),
          require("../../assets/image/ic3.jpg"),
          require("../../assets/image/ic4.jpg"),
          require("../../assets/image/ic5.jpg"),
          require("../../assets/image/ic6.jpg"),
          require("../../assets/image/ic7.jpg"),
          require("../../assets/image/ic8.jpg"),
          require("../../assets/image/ic9.jpg"),
          require("../../assets/image/ic10.jpg")
        ],
        img1: require("../../assets/image/rou.png"),
        img2:
          "https://img10.360buyimg.com/babel/jfs/t21274/154/2326809402/63048/1ab6b2a9/5b5057abN4321302f.jpg",
        img3:
          "https://img10.360buyimg.com/babel/jfs/t20215/79/1757898901/100803/9aba7741/5b32e2a3N639741c5.png!q80.webp"
      }
    };
  },
  components: {
    Banner,
    Mains,
    Recommend
  },
  mounted() {
    this.Windos();
  },
  methods: {
    //电梯导航实现
    Windos: function() {
      var that = this;
      window.onscroll = function() {
        if (scroll().top > 300) {
          that.seenright = true;
        } else {
          that.seenright = false;
        }
        that.seen(scroll().top);
        that.windowsrcoll = scroll().top;
        // console.log(that.windowsrcoll)
      };
    },
    seen: function(top) {
      var that = this;
      var value = top;
      switch (true) {
        case value > 300 && value < 1000:
          that.index = 0;
          $("#win").children()[0].style.background = "#00c65d";
          $("#win").children()[1].style.background = "";
          break;
        case value > 1000 && value < 1600:
          that.index = 1;
          $("#win").children()[0].style.background = "";
          $("#win").children()[1].style.background = "#00c65d";
          $("#win").children()[2].style.background = "";
          break;
        case value > 1600 && value < 2200:
          that.index = 2;
          $("#win").children()[1].style.background = "";
          $("#win").children()[2].style.background = "#00c65d";
          $("#win").children()[3].style.background = "";
          break;
        case value > 2200 && value < 2800:
          that.index = 3;
          $("#win").children()[2].style.background = "";
          $("#win").children()[3].style.background = "#00c65d";
          $("#win").children()[4].style.background = "";
          break;
        case value > 2800 && value < 3400:
          that.index = 4;
          $("#win").children()[3].style.background = "";
          $("#win").children()[4].style.background = "#00c65d";
          break;
        default:
        // console.log('测试中')
      }
    },
    windi: function(index) {
      var that = this;
      var num = index;
      var leader = 0;
      var timer = 0;
      // clearInterval(timer);
      var target = 0; // 目标位置
      var arr = [
        { target: 655 },
        { target: 1250 },
        { target: 1840 },
        { target: 2434 },
        // { target: 2945 }
        {target:3009}
      ];
        clearInterval(timer);
      for (var i = 0; i < arr.length; i++) {
        if (i == index) {
          target = arr[i].target;
           clearInterval(timer);
          timer = setInterval(function() {
            leader = that.windowsrcoll;
            var step = (target - leader) / 3;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader += step;
            window.scrollTo(0, leader);
            if (target == leader) {
              clearInterval(timer);
            }
          },30);
        }
      }
    },
    //返回顶部方法
    top:function(){
      var that = this;
      var leader = 0;
      var timer = 0;
      var target=0;
      clearInterval(timer);
      timer=setInterval(function(){
        leader = that.windowsrcoll;
        var step = (target - leader) / 3;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader += step;
            window.scrollTo(0, leader);
             if (target == leader) {
              clearInterval(timer);
            }
      })
    }
  }
};
</script>
<style>
.windiv {
  top: 27%;
  right: 3px;
  position: fixed;
  z-index: 999999;
}
.windiv li {
  width: 49px;
  height: 27px;
  padding-top: 5px;
  line-height: 20px;
  text-align: center;
  font-size: 13px;
  margin-top: 3px;
  background: rgba(4, 4, 4, 0.5);
  color: white;
}
.windiv li:hover {
  transition: all 0.5s linear;
  background: rgb(0, 198, 93);
}
.windiv li:nth-child(6) {
  margin-top: 19px;
  font-size: 21px;
}
.windiv li:nth-child(7) {
  font-size: 21px;
}
.windiv li:nth-child(8) {
  font-size: 1px;
}
.windiv li:nth-child(8) div:nth-child(1) {
  font-size: 1px;
  margin-top: -5px;
}
.windiv li:nth-child(8) div:nth-child(2) {
  font-size: 13px;
  margin-top: -7px;
}
</style>
